<template>
  <div v-if="detialvisible">
    <el-dialog :visible="detialvisible" class="detailWarp" title="详细信息" @close="closeDialog">
      <el-form v-if="detailMode == 'menberManage'" disabled="disabled" >
        <el-form-item :label-width="labeWidth" label="单号">
          <el-input v-model="ditaillist.orderNumbers" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="入会时间">
          <!-- <el-input v-model="formatCreateTime" class="input" /> -->
          <el-input v-model="ditaillist.createTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="会员等级">
          <el-input v-model="formatLevel" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="入会人">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="入会人手机号码">
          <el-input v-model="ditaillist.phone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="地推人员">
          <el-input v-model="ditaillist.saleName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="直推人员">
          <el-input v-model="ditaillist.directPushUser" class="input" />
        </el-form-item>
      </el-form>
      <el-form v-if="detailMode == 'withdrawCash'" disabled="disabled" >
        <el-form-item :label-width="labeWidth" label="ID">
          <el-input v-model="ditaillist.cashOrderNum" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请金额">
          <el-input v-model="ditaillist.amount" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请人">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请人手机号">
          <el-input v-model="ditaillist.applyPhone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请时间">
          <el-input v-model="formatCreateTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="提现银行">
          <el-input v-model="ditaillist.bankName " class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="提现账号">
          <el-input v-model="formatBankCard1" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="收款人姓名">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
      </el-form>
      <el-form v-if="detailMode == 'cash'" disabled="disabled" >
        <el-form-item :label-width="labeWidth" label="ID">
          <el-input v-model="ditaillist.cashOrderNum" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请金额">
          <el-input v-model="ditaillist.amount" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请人">
          <el-input v-model="ditaillist.teacher.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请人手机号">
          <el-input v-model="ditaillist.teacher.mobilePhone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请时间">
          <el-input v-model="formatCreateTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="提现账号">
          <el-input v-model="formatBankCard" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="收款人姓名">
          <el-input v-model="ditaillist.bankCardInfo.name" class="input" />
        </el-form-item>
      </el-form>
      <el-form v-if="detailMode == 'singup'" disabled="disabled" >
        <el-form-item :label-width="labeWidth" label="单号">
          <el-input v-model="ditaillist.orderNum" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="报名时间">
          <el-input v-model="formatCreateTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="课程标题">
          <el-input v-model="ditaillist.title" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="报名人">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="报名人手机号">
          <el-input v-model="ditaillist.phone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="推广人">
          <el-input v-model="ditaillist.nickName" class="input" />
        </el-form-item>
      </el-form>
      <el-form v-if="detailMode == 'sysUser'" disabled="disabled">
        <el-form-item :label-width="labeWidth" label="用户名称">
          <el-input v-model="ditaillist.username" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="角色">
          <el-input v-model="ditaillist.roleName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="姓名">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="手机号">
          <el-input v-model="ditaillist.phone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="EMAIL">
          <el-input v-model="ditaillist.email" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="最后登录时间">
          <el-input v-model="ditaillist.lastLoginTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="状态">
          <el-input v-model="formatStatus" class="input" />
        </el-form-item>
      </el-form>
      <!-- 订单 -->
      <el-form v-if="detailMode == 'order'" disabled="disabled">
        <el-form-item :label-width="labeWidth" label="订单编号">
          <el-input v-model="ditaillist.orderNumbers" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="下单时间">
          <el-input v-model="ditaillist.createTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="会员等级">
          <el-input v-model="formatVipId" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="地推人员">
          <el-input v-model="formatdtName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="直推人员">
          <el-input v-model="formatztName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="总价">
          <el-input v-model="ditaillist.price" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="购买人姓名">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="购买人手机号">
          <el-input v-model="ditaillist.phone" class="input" />
        </el-form-item>
        <!-- <el-form-item :label-width="labeWidth" label="分享人员">
          <el-input v-model="ditaillist.promoter" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="分享提成">
          <el-input v-model="ditaillist.promotionCommission / ditaillist.number" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="分享提成">
          <el-input v-model="shareCommission" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="成功分享人数">
          <el-input v-model="ditaillist.number" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="分享提成总额">
          <el-input v-model="ditaillist.promotionCommission" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="销售人员">
          <el-input v-model="ditaillist.salesperson" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="销售底价">
          <el-input v-model="ditaillist.salesReservePrice" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="销售提成">
          <el-input v-model="salesCommission" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="成功销售人数">
          <el-input v-model="ditaillist.number" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="销售提成总额">
          <el-input v-model="ditaillist.salesCommission" class="input" />
        </el-form-item>-->
      </el-form>
      <!-- 商城订单详情 -->
      <div v-if="detailMode == 'storeOrder'" class="storeOrder_title">
        订单状态：{{ ditaillist.orderStatus | formatStoreOrder }}
      </div>
      <el-form v-if="detailMode == 'storeOrder'" class="storeOrder" disabled="disabled">
        <h3 class="ml20">基本信息</h3>
        <el-form-item :label-width="labeWidth" label="订单编号">
          <el-input v-model="ditaillist.orderSn" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="下单时间">
          <el-input v-model="ditaillist.createTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="商品名称">
          <el-input v-model="ditaillist.goodsName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="类型">
          <el-input v-model="ditaillist.categoryName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="购买数量">
          <el-input v-model="ditaillist.goodsQuantity" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="单价">
          <el-input v-model="formatGoodsQuoted" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="快递费">
          <el-input v-model="ditaillist.postageAmount" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="美妈折扣">
          <el-input v-model="ditaillist.vipDiscount" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="总价">
          <el-input v-model="formatTotalPirce" class="input" />
        </el-form-item>
        <hr>
        <h3 class="ml20">收件人信息</h3>
        <el-form-item :label-width="labeWidth" label="收件人姓名">
          <el-input v-model="ditaillist.receiverName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="收件人手机">
          <el-input v-model="ditaillist.receiverPhone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="收件详细地址">
          <el-input v-model="detailAddress" class="input" style="width:90%" />
        </el-form-item>
      </el-form>

      <!-- 酒店订单详情 -->
      <div v-if="detailMode == 'hotelOrder'" class="storeOrder_title">
        订单状态：{{ ditaillist.orderStatus | formatRoomOrder }}
      </div>
      <el-form v-if="detailMode == 'hotelOrder'" class="storeOrder" disabled="disabled">
        <h3 class="ml20">订单信息</h3>
        <el-form-item :label-width="labeWidth" label="订单编号">
          <el-input v-model="ditaillist.orderSn" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="下单时间">
          <el-input v-model="ditaillist.createTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="房型名称">
          <el-input v-model="ditaillist.goodsName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="类型">
          <el-input v-model="ditaillist.roomType" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="入住日期">
          <el-input v-model="ditaillist.checkInTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="离店日期">
          <el-input v-model="ditaillist.checkOutTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="单价">
          <el-input v-model="ditaillist.roomSalePrice" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="间夜数量">
          <el-input v-model="ditaillist.totalNum" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="总价">
          <el-input v-model="ditaillist.totalAmount" class="input" />
        </el-form-item>
        <hr>
        <h3 class="ml20">入住人信息</h3>
        <el-form-item :label-width="labeWidth" label="入住人姓名">
          <el-input v-model="ditaillist.customerName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="入住人手机">
          <el-input v-model="ditaillist.customerPhone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="留言">

          <el-input v-model="ditaillist.customerMessage" :rows="10" type="textarea" class="input" />
        </el-form-item>
      </el-form>

      <el-form v-if="detailMode == 'address'" disabled="disabled">
        <el-form-item :label-width="labeWidth" label="寄件人">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="购买人手机号">
          <el-input v-model="ditaillist.phone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="详细地址">
          <el-input v-model="ditaillist.detailAddress" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="状态">
          <el-input v-if="ditaillist.status === '0'" value="停用" class="input"/>
          <el-input v-if="ditaillist.status === '1'" value="启用" class="input"/>
        </el-form-item>
      </el-form>
      <el-form v-if="detailMode == 'sysRole'" disabled="disabled">
        <el-form-item :label-width="labeWidth" label="角色名称">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="描述">
          <el-input v-model="ditaillist.remark" type="textarea" class="input" />
        </el-form-item>
        <!-- <el-form-item :label-width="labeWidth" label="用户名称">
          <el-input v-model="ditaillist.createUser" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="角色">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="姓名">
          <el-input v-model="ditaillist.name" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="手机号">
          <el-input v-model="ditaillist.phone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="最后登陆时间">
          <el-input v-model="ditaillist.phone" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="状态">
          <el-input v-model="formatStatus" class="input" />
        </el-form-item> -->
      </el-form>
      <el-form v-if="detailMode == 'platform'" disabled="disabled">
        <el-form-item :label-width="labeWidth" label="单号">
          <el-input v-model="ditaillist.recordSn" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="提现金额">
          <el-input v-model="ditaillist.amount" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请人">
          <el-input v-model="ditaillist.createName" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请时间">
          <el-input v-model="ditaillist.createTime" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="提现银行">
          <el-input v-model="ditaillist.bankInfo" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="提现账号">
          <el-input v-model="formatBankCardPlatform" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="收款人">
          <el-input v-model="ditaillist.platformName" class="input" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  filters: {
    formatStoreOrder(orderStatus) {
      const storeOrderMap = {
        0: '待付款',
        100: '已付款(待发货)',
        200: '已发货(待收货)',
        300: '已签收',
        350: '已收货',
        400: '申请退款',
        410: '拒绝退款',
        420: '待发货(同意退款)',
        430: '已发货',
        440: '已收货',
        450: '已退款',
        500: '已完成'
      }
      if (orderStatus === -100) {
        return '已取消'
      } else {
        return storeOrderMap[orderStatus]
      }
    },
    formatRoomOrder(orderStatus) {
      const storeOrderMap = {
        0: '待支付',
        100: '已支付(待确认订单)',
        200: '已确认(确认有房)',
        210: '已入住',
        220: '未入住',
        230: '未操作',
        310: '已完成(已入住)',
        320: '已完成(未入住)',
        330: '已完成(未操作)',
        400: '申请退款',
        410: '已退款',
        420: '拒绝退款'
      }
      if (orderStatus === -100) {
        return '已取消'
      } else {
        return storeOrderMap[orderStatus]
      }
    }
  },
  props: {
    dialogdata: {
      type: Array,
      required: true
    },
    detialvisible: {
      type: Boolean,
      required: true
    },
    myindex: {
      type: Number,
      required: true
    },
    detailMode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      ditaillist: {},
      detailIndex: 0,
      roleName: '',
      loginTime: '',
      nickName: '',
      labeWidth: '120px'
    }
  },
  computed: {
    formatLevel(level) {
      const levelMap = {
        1: '泰山美妈',
        2: '泰山美妈团',
        3: '泰山美妈社',
        4: '泰山美妈会'
      }
      return levelMap[this.ditaillist.level]
      // return this.ditaillist.status === 1 ? '启用' : '禁用'
    },
    formatVipId(vipId) {
      const vipIdMap = {
        1: '泰山美妈',
        2: '泰山美妈团',
        3: '泰山美妈社',
        4: '泰山美妈会'
      }
      return vipIdMap[this.ditaillist.vipId]
    },
    formatztName(name) {
      return this.ditaillist.ztName || '-'
    },
    formatdtName(name) {
      return this.ditaillist.dtName || '-'
    },
    // 分享提成
    shareCommission() {
      return this.ditaillist.promotionCommission / this.ditaillist.number
    },
    salesCommission() {
      return this.ditaillist.salesCommission / this.ditaillist.number
    },
    formatCreateTime() {
      return this.$options.filters['formatDate'](this.ditaillist.createTime)
    },
    formatLoginTime() {
      if (this.ditaillist.userLoginRecord) {
        return this.$options.filters['formatDate'](this.ditaillist.userLoginRecord.loginTime)
      } else {
        return ''
      }
    },
    formatStatus() {
      return this.ditaillist.status === 1 ? '启用' : '禁用'
    },
    formatBankCard() {
      if (this.ditaillist.bankCardInfo.bankCard) {
        return this.$options.filters['hideBankCard'](this.ditaillist.bankCardInfo.bankCard)
      } else {
        return ''
      }
    },
    formatBankCard1() {
      if (this.ditaillist.bankCard) {
        return this.$options.filters['hideBankCard'](this.ditaillist.bankCard)
      } else {
        return ''
      }
    },
    formatBankCardPlatform() {
      if (this.ditaillist.bankInfo) {
        return this.$options.filters['hideBankCard'](this.ditaillist.platformAccount)
      } else {
        return ''
      }
    },
    formatGoodsQuoted() {
      if (this.ditaillist.goodsAmount && this.ditaillist.goodsQuantity) {
        return this.ditaillist.goodsAmount / this.ditaillist.goodsQuantity
      }
    },
    formatTotalPirce() {
      if (this.ditaillist.goodsAmount && this.ditaillist.goodsQuantity) {
        return this.ditaillist.goodsAmount + this.ditaillist.postageAmount
      }
    },
    // 拼接详细地址
    detailAddress() {
      if (this.ditaillist.receiverProvince === '北京市' || this.ditaillist.receiverProvince === '天津市') {
        return this.ditaillist.receiverProvince + this.ditaillist.receiverDetailAddress + this.ditaillist.receiverCounty
      } else {
        return this.ditaillist.receiverProvince + this.ditaillist.receiverCity + this.ditaillist.receiverCounty + this.ditaillist.receiverDetailAddress
      }
    }

  },
  watch: {
    myindex(val) {
      this.detailIndex = val
      this.ditaillist = this.dialogdata[this.detailIndex]
      // console.log(this.ditaillist)
      // if (this.ditaillist.role) {
      //   console.log(this)
      //   this.roleName = this.ditaillist.role.name
      // }
      // if (this.ditaillist.userLoginRecord) {
      //   this.loginTime = this.ditaillist.userLoginRecord.loginTime
      // }
      // this.nickName = this.ditaillist.wxUser.nickName
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:detialvisible', false)
      this.$emit('update:myindex', -1)
    }
  }
}
</script>

<style scoped>
  .detailWarp{
    padding-bottom:20px;
  }
  .el-dialog{
    padding-bottom:20px;
  }
  .el-form{
    padding-bottom: 20px;
  }
  .storeOrder .el-form-item{
      margin-bottom: 10px;
  }

   .ml20{
        margin-left: 20px;
    }

  .storeOrder_title{
      padding:10px;
      margin:10px;
      margin-bottom:20px;
      background: #f5f5f5;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
  }

  hr{
      border: 1px solid #eee;
      margin: 20px 0;
  }
</style>
